<template>
	<el-dialog v-model="dialogMenuVisible" width="700" title="快速菜单配置" center :align-center="true"
		custom-class="radius8">
		<el-scrollbar height="450">
			<div class="p20">
				<div class="mt20" v-for="(item,index) in infoArray" :key="index">
					<el-checkbox @change="(val) => handleCheckAll(val, item)" :indeterminate="itemIndeterminate(item)"
						v-model="item.flag">
						<div class="fs15 fb color333">{{ item.label }}</div>
					</el-checkbox>
					<el-checkbox-group v-model="selectedData" @change="handleChanges(item)" style="padding-left: 30px;">
						<el-checkbox v-for="items in item.children" :key="items.id"
							:label="items.id">{{ items.label }}</el-checkbox>
					</el-checkbox-group>
				</div>
			</div>
		</el-scrollbar>
		<div slot="footer" class="dialog-footer text-right mt30">
			<el-button class="cancelSubBtn" @click="dialogMenuVisible = false">取 消</el-button>
			<el-button type="primary" @click="confirmMenu()" 
			class="mainSubBtn">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import {
		menuList, //当前用户菜单
		editMenu //快速菜单修改
	} from "@/api/business/workbenches";
	export default {
		props:{
			menu:{
				type:Array,
				default:res=>{return []}
			}
		},
		data() {
			return {
				dialogMenuVisible: false, //配置菜单
				infoArray: [],
				selectedData: [], //选中数据（数组）
				subSelectData:[],//要提交的数据
			}
		},
		watch:{
			menu(val){
				if(val.length > 0){
					let tempList = []
					this.menu.forEach(element => {
						this.selectedData.push(element.menuId)
						
						// 判断是否全选(放在this.selectedData数据获取完成后，异步请求下数据如果还未存入会导致读取不到，一开始了放在外层，导致回显失败)
						this.infoArray.forEach((item, index) => {
							tempList[index] = item.children.map(ite => ite.id)
							tempList[index].some((v) => {
								if (this.selectedData.indexOf(v) == -1) {
									item.flag = false;
								} else {
									item.flag = true
								}
							});
						})
					});
				}
			}
		},
		created() {
			this.getMenuList()
		},
		methods: {
			// 提交
			confirmMenu(){
				let arr = []
				for(let key in this.infoArray){
					for(let j in this.infoArray[key].children){
						for(let k in this.selectedData){
							if(this.selectedData[k] == this.infoArray[key].children[j].id){
								let item = {
										menuId:this.infoArray[key].children[j].id,
										path:'/'+this.infoArray[key].path+'/'+this.infoArray[key].children[j].path
									}
								arr.push(item)
							}
						}
					}
				}
				editMenu(arr).then(res=>{
					console.log(res,'res====')
					this.$modal.msgSuccess('已修改')
					this.dialogMenuVisible = false
					this.$emit('refreshData')
				})
			},
			init() {
				listAllCard().then(res => {
					this.cardList = res.data
				})
				listAllInfo().then(res => {
					// 添加是否全选标识
					this.infoArray = (res.data).map((v) => ({
						...v,
						flag: false
					}))
				})
			},
			// 全选
			handleCheckAll(val, item) {
				// 过滤掉没有选中的数据，item.child中不包含v时返回-1
				const next = item.children.map(item => item.id)
				const filterArr = this.selectedData.filter(
					(v) => next.indexOf(v) == -1
				);
				this.selectedData = val ? filterArr.concat(next) : filterArr;
			},
			itemIndeterminate(item) {
				if (item.children) {
					const childrens = item.children.map(ite => ite.id)
					return (
						childrens.some((v) => this.selectedData.indexOf(v) > -1) &&
						!childrens.every((v) => this.selectedData.indexOf(v) > -1)
					);
				}
			},
			// 勾选变化方法
			handleChanges(val) {
				const childrens = val.children.map(ite => ite.id)
				childrens.every((v) => {
					if (this.selectedData.indexOf(v) > -1) {
						val.flag = true;
					} else {
						val.flag = false
					}
				});
			},
			handleAdd(row) {
				this.reset();
				this.form.cardId = row.cardId
				this.form.templateId = row.templateId
				this.postData.templateId = row.templateId
				this.cardList.forEach(element => {
					if (element.cardId == row.cardId) {
						this.cardName = element.cardName
					}
				});
				this.templateName = row.templateName

				// 回显
				this.selectedData = []
				getList(row.templateId).then(res => {
					res.data.forEach(element => {
						this.selectedData.push(element.id)

						// 判断是否全选(放在this.selectedData数据获取完成后，异步请求下数据如果还未存入会导致读取不到，一开始了放在外层，导致回显失败)
						this.infoArray.forEach((item, index) => {
							this.tempList[index] = item.children.map(ite => ite.id)
							this.tempList[index].some((v) => {
								if (this.selectedData.indexOf(v) == -1) {
									item.flag = false;
								} else {
									item.flag = true
								}
							});
						})
					});
				})

			},
			open() {
				this.dialogMenuVisible = true
			},
			close() {
				this.dialogMenuVisible = false
			},
			// 当前客户菜单
			getMenuList() {
				menuList().then(res => {
					let list = res.menus
					const filteredArray = list.filter(item => item.menuType == 'M');
					var simplestFilteredMenus = filteredArray.map(menu => ({
					  ...menu,
					  children: menu.children
					    .flat()
					    .filter(obj => obj.menuType !== 'F')
					}));
					let itemArr = [
						// {
						// 	id:'-1',
						// 	label:'客户查重',
						// 	children:[
						// 		{
						// 			id:'-2',
						// 			label:'客户查重'
						// 		}
						// 	]
						// }
					]
					// simplestFilteredMenus = itemArr.concat(simplestFilteredMenus)
					this.infoArray = itemArr.concat(simplestFilteredMenus)
					// console.log(simplestFilteredMenus'this.infoArray')
				})
			},
		}
	}
</script>

<style>
	
</style>